<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加资源</title>

</head>
<link rel="stylesheet" href="/css/bootstrap.min.css">
<script src="/qs.js"></script>
<script src="/axios.min.js"></script>
<script src="/vue.js"></script>
<style>
    .notnpadding{
        padding: 0;
        position: relative;
        top: 5px;
    }
    .sd{
        margin-top: 20px;
    }
</style>
<body>
<div id="app">
    <div class="container">
        <br/>
        <div class="row">
            <div class="col-sm-2 notnpadding">
                <label class="float-right">资源名称</label>
            </div>
            <div class="col-sm-10">
                <input v-model="resourceName" class="form-control">
            </div>
        </div>
        <br/>
        <div class="row">
            <div class="col-sm-2 notnpadding">
                <label class="float-right">资源资源类型</label>
            </div>
            <div class="col-sm-10">
                <div class="form-check">
                    <input class="form-check-input" v-model="resourceType" type="radio" name="exampleRadios" id="exampleRadios1" value=1 checked>
                    <label class="form-check-label" for="exampleRadios1">
                        创意类赛项
                    </label>
                </div>
                <div class="form-check">
                    <input class="form-check-input" v-model="resourceType" type="radio" name="exampleRadios" id="exampleRadios2" value=2>
                    <label class="form-check-label" for="exampleRadios2">
                        智能类赛项
                    </label>
                </div>
                <div class="form-check">
                    <input class="form-check-input" v-model="resourceType" type="radio" name="exampleRadios" id="exampleRadios3" value=3>
                    <label class="form-check-label" for="exampleRadios3">
                        列表项
                    </label>
                </div>
            </div>
        </div>
        <div class="row sd">
            <div class="col-sm-2 notnpadding">
                <label class="float-right">上传资源</label>
            </div>
            <div class="col-sm-10">
                <input type="file"  @change="uploadfile" class="form-control-file" id="exampleFormControlFile1">
            </div>
        </div>
        <hr class="my-4">
        <div class="row">
            <div style="margin: 0 auto">
                <button @click="saveAddResouce" class="btn btn-success">提交</button>
            </div>
        </div>
    </div>
</div>
<script>
    new Vue({
        el:"#app",
        data(){
            return{
                fileId:null,
                resourceName:null,
                resourceType:0,
            }
        },
        methods:{
            uploadfile(val){
              let file = val.target.files;
              let formdata = new FormData();
                formdata.append("file",file[0]);
                axios({
                    method:"post",
                    headers:{'Content-Type':'multipart/form-data'},
                    url:"/uploadFiles",
                    data:formdata
                }).then(res=>{
                    this.fileId = res.data.fileId
                })
            },
            saveAddResouce(){
                let data={
                    "fileId":this.fileId,
                    "resourceName":this.resourceName,
                    "resourceType":this.resourceType
                }
                axios.post("/saveAddResouce",Qs.stringify(data)).then(res=>{
                    if(res.data){
                        window.location.href="/resourceManager.html"
                    }
                })
            }
        },mounted(){
          //  document.getElementById('preview').innerHTML = "<blockquote><p>这是</p></blockquote><p>我没有着你这个儿子</p><blockquote><h3><strong>阿斯顿发士大夫</strong></h3></blockquote>"
        }
    })
</script>
</body>
</html>